<template>
  <div class="all">
    <div class="d2">
      <div class="dd1">
        设备编号:&nbsp;&nbsp;&nbsp;<el-input
        class="el1"
          size="mini"
          v-model="query.facModel"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="dd2">
        区域:&nbsp;&nbsp;&nbsp;<el-select
          size="mini"
          v-model="query.areaId"
          placeholder="请选择"
        >
          <el-option
            v-for="area in options"
            :key="area.areaId"
            :label="area.areaName"
            :value="area.areaId"
          >
          </el-option>
        </el-select>
      </div>
      <div class="dd3">
        <el-row>
          <el-button type="primary" round size="small" @click="load()"
            >查询</el-button
          >
          <el-button type="info" round size="small" @click="loadNew()"
            >重置</el-button
          >
        </el-row>
      </div>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="facModel" label="编号" width="100">
        </el-table-column>
        <el-table-column prop="lpId" label="灯杆编号" width="100">
        </el-table-column>
        <el-table-column prop="areaName" label="地区" width="100">
        </el-table-column>
        <el-table-column prop="facDate" label="生产日期" width="130">
        </el-table-column>
        <el-table-column prop="facSeller" label="生产厂家" width="130">
        </el-table-column>
        <el-table-column prop="facStateName" label="目前状态" width="100">
        </el-table-column>
        <el-table-column prop="frStartTime" label="开启时间" width="130">
        </el-table-column>
        <el-table-column prop="frEndTime" label="关闭时间" width="130">
        </el-table-column>
        <el-table-column label="操作" prop="facId">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle
            @click="updat(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="del(scope.row.facId)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改dialog========================= -->
<el-dialog title="修改照明" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="设备编号" :label-width="formLabelWidth">
      <el-input v-model="form.facModel" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="生产厂家" :label-width="formLabelWidth">
      <el-input v-model="form.facSeller" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="生产日期" :label-width="formLabelWidth">
      <!-- <el-input v-model="form.facDate" autocomplete="off"></el-input> -->
      <el-date-picker
      v-model="form.facDate"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
    </el-form-item>
    <el-form-item label="目前状态" :label-width="formLabelWidth">
      <el-select v-model="form.facStateId" placeholder="请选择状态">
        <el-option
            v-for="sta in stateList"
            :key="sta.facstateId"
            :label="sta.facstateName"
            :value="sta.facstateId"
          >
          </el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="quxiao">取 消</el-button>
    <el-button type="primary" @click="tijiao">确 定</el-button>
  </div>
</el-dialog>


    <div class="block">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

  <script>
export default {
  data() {
    return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      tableData: [],
      query: {
        currentPage: 1, //代表当前页
        pageSize: 6, //代表每页显示多少条数据
        areaId: "",
        facModel: "",
      },
      page: {
        pageSizes: [6, 12, 30, 60, 120], //下拉列表中的数组
        total: 0, //一共有多少条数据
      },
      options: [],
      form:{},
      formLabelWidth: '120px',
      dialogFormVisible:false,
      stateList:[],
    };
  },
  methods: {
    tijiao(){
        this.$axios.put("fac/updt",this.form).then(res=>{
            this.form={};
            this.dialogFormVisible=false;
            this.$message.success("修改成功");
        });
    },
    quxiao(){
        this.dialogFormVisible = false;
        this.form=[];
    },
    updat(row){
        this.form = row;
        this.dialogFormVisible = true;
    },
    del(id){
        this.$axios.delete("fac/"+id).then((res) => {
            this.$message.success("删除成功");
            this.load();
        });
    },
    load() {
      this.$axios.post("fac/queryz", this.query).then((res) => {
        this.tableData = res.data.data.zList;
        this.page.total = res.data.data.total;
      });
    },
    loadNew() {
      this.query.areaId = "";
      this.query.facModel = "";
      this.load();
    },
    loadArea() {
      this.$axios.get("area").then((res) => {
        this.options = res.data.data.areaList;
      });
    },
    loadStates() {
      this.$axios.get("FStates").then((res) => {
        this.stateList = res.data.data.states;
      });
    },
    handleSizeChange(val) {
      //当每页数据改变时
      this.query.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      //当点击页码时
      this.query.currentPage = val;
      this.load();
    },
  },
  mounted() {
    this.load();
    this.loadArea();
    this.loadStates();
  },
};
</script>
  <style scoped>
.d2 {
  width: auto;
  height: 35px;
}
.dd1 {
  width: 300px;
  height: 33px;
  font-size: 14px;
  float: left;
}
.dd2 {
  width: 300px;
  height: 33px;
  font-size: 14px;
  float: left;
}
.dd3 {
  width: 250px;
  height: 33px;
  font-size: 14px;
  float: right;
}
.el1 {
  width: 100px;
  height: 33px;
}
</style>